xFactorSchool.com(Beta)
How to Do Examples
Python Examples
HTML Examples
Code Examples
C Code Examples
C++ Code Examples
C# Code Examples
Java Code Examples
Python Code Examples
HTML Code Examples
CSS Code Examples
JavaScript Code Examples
Online Editor
C Code Editor
C++ Code Editor
C# Code Editor
Java Code Editor
Python Code Editor
HTML Code Editor
CSS Code Editor
JavaScript Code Editor
Practice how to set margin at all sides of an HTML element in a single line using CSS
CSS Online Editor
Run Code
More CSS Sample Codes
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Set margin at all sides of an HTML element in a single line using CSS</title> <!--Internal CSS added--> <style> /* CSS id name used to apply css style to the divs*/ #div-1 { background-color: lightpink; /*background color of the div*/ } #div-2 { margin: 20px 40px 30px 40px; /*top 20px, right 40px, botton 30px, left 40px*/ background-color: lightblue; /*background color of the div*/ } #div-3 { background-color: green; /*background color of the div*/ } div { min-height: 60px; } </style> </head> <body> <h1>How to set margin at all sides of an HTML element in a single line using CSS?</h1> <p>Use margin CSS property and set margin at <b style="color:orangered;">top-right-botton-left</b> order.</p> <div id="div-1">First div with margin</div> <div id="div-2">Second div with margin at all sides with different in size: top 20px, right 40px, botton 30px, left 40px</div> <div id="div-3">Third div with no margin</div> </body> </html>
CSS Online Editor
CSS Online Editor